<template>
    <div class="aside-wrapper">
        <el-menu class="el-menu-vertical-demo"
        router 
        :background-color="primaryColor"
        :default-active="$route.path"
        @open="handleOpen"
        @close="handleClose"
        @select="setRouter"
        :collapse="isCollapse"
        :unique-opened="true"
        text-color="#fff"
        >
            <el-submenu :index=(index+1).toString() v-for="(item,index) in aside"  :key="index" v-if="item.type!==3" >
                <template slot="title" >
                    <!--<i :class="[item.icon.substring(2,0)=='el'?'':'icon',item.icon.substring(2,0)=='el'?'':'iconfont',item.icon]"></i>-->
                    <span class="nav">{{item.name}}</span>
                </template>
                <div v-for="(list,index) in item.list"  :key="index" v-if="list.type!==3" >
                    <el-menu-item :index="`/home/${list.url}`" >{{list.name}}</el-menu-item>
                </div>
            </el-submenu>
        </el-menu>
        <!-- <div class="shrink" @click="takeCollapse">
            <i :class="isCollapse?'el-icon-caret-right':'el-icon-caret-left'"></i>
        </div> -->
    </div>
</template>

<script>
    export default {
        data() {
            return {
                aside:'',
                isCollapse:false,
            }
        },
        created(){
            // this.aside = this.asideAll
            this.aside=JSON.parse(sessionStorage.getItem('aside'))

        },
        components: {},
        methods:{
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            takeCollapse:function(){
                if(this.isCollapse){
                    this.isCollapse = false;
                }else{
                    this.isCollapse = true
                }
            },
            setRouter(index,asideArray) {
                const title = this.aside[asideArray[0] -1].name
                this.$store.commit('SET_BREADCRUMBARR', [{
                    title
                }]);

            }
        },
        watch: {
            $route(newValue, oldValue){
                const currentRouter = this.$store.state.common.breadcrumbArr.slice(0);
                currentRouter.push(newValue.meta);
                this.$store.commit('SET_BREADCRUMBARR', currentRouter);
            }
        },
        computed: {
            primaryColor() {
                return this.$store.state.common.primaryColor;
            }
        }
    }
</script>

<style scoped lang="scss">
    @import './iconfont/iconfont.css';
    .iconfont {
        color: white;
    }
   /deep/ .el-icon-arrow-down{
        color: white;
    }
    .el-menu-item.is-active{
        color: #fff;
        filter: saturate(130%);
    }
    .aside-wrapper{
        height: 100%;
        width: 270px;
        min-width: 270px;
        position: relative;
        // background-color: #2285dc;
    }
    .el-menu-vertical-demo .el-menu{

    }
    .el-submenu [class^=el-icon-]{
        margin-right: 2px;
    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 270px;
        height: 100%;
        overflow: auto;
    }
    /deep/ .el-submenu__title{
        // font-size: 12px;
        // height: 36px;
        // line-height: 36px;
    }
    .el-submenu.is-opened > .el-submenu__title, .el-submenu.is-opened > .el-submenu__title > i{
        color: white;
    }
    .el-submenu .el-menu-item{
        // font-size: 12px;
        // height: 30px;
        // line-height: 30px;
    }
    /deep/ .el-menu--inline{
        padding: 10px 0;
    }
    .el-menu--inline{
        div{
            .el-menu-item{
                padding-left: 55px !important;
            }
        }
    }
    .aside-wrapper .icon{
        vertical-align: middle;
        margin:0 5px;
    }
    .aside-wrapper .nav{
        margin-left: 5px;
        vertical-align: middle;
    }
    .el-menu-item a{
        display: block;
        width: 100%;
        height: 100%;
    }
    .el-menu-item.is-active{
        border-left: 3px solid #409EFF;
        background: #f4f5fa;
    }
    .shrink{
        position: absolute;
        right: -12px;
        top: 50%;
        height: 60px;
        line-height: 60px;
        width: 12px;
        z-index: 2;
        background: #409EFF;
        margin-top: -40px;
        text-align: center;
        color: #fff;
        font-size: 14px;
        cursor: pointer;
    }
    .el-menu--inline div .el-menu-item{
    border: 0;
    }
</style>
